<template>
<div>
  <h1>this is vuex demo</h1>
  <h1 >the store's state is {{counter}},which is {{evenOrOdd}}</h1>
  <button @click ='increment'>plus 1</button>
  <button @click='incrementIfOdd'>plus1 if odd</button>
  <button @click='incrementAsync'>plus1 Async</button>
  
</div>

</template>


<script>

// import {mapState} from 'vuex'
import {mapState,mapGetters,mapActions} from 'vuex'
    export default {
      name:'vuex',
      data () {
         return {

        }
      },
      computed:{
          ...mapGetters([
             'evenOrOdd'
          ]),
          ...mapState({
              counter: state => state.count
          })
      },
       methods:{
         ...mapActions([
           'increment',
           'incrementIfOdd',
           'incrementAsync'
         ])
            // increment (){
            //     this.$store.dispatch('increment')
            // },
            // incrementIfOdd(){
            //     this.$store.dispatch('incrementIfOdd')

            // },
            // incrementAsync(){
            //     this.$store.dispatch('incrementAsync')
            // }
          }
      
    }
</script>
<style >

</style>

